<!doctype html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>



<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />















  
  
  <link href="/blog/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />




  
  
  
  

  
    
    
  

  

  

  

  
    
      
    

    
  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  






<link href="/blog/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/blog/css/main.css?v=5.1.0" rel="stylesheet" type="text/css" />


  <meta name="keywords" content="vue protobuf" />








  <link rel="shortcut icon" type="image/x-icon" href="/blog/favicon.ico?v=5.1.0" />






<meta name="description" content="因公司需求需使用protobuf，然后就有了这个踩坑记录

什么是protobuf？官方解释为：

Protocol buffers are a flexible, efficient, automated mechanism for serializing structured data – think XML, but smaller, faster, and simpler. You de">
<meta property="og:type" content="article">
<meta property="og:title" content="vue中使用protobuf踩坑记">
<meta property="og:url" content="https://rsl140.github.io/blog/2018/06/27/protobuf/index.html">
<meta property="og:site_name" content="XiaoSi">
<meta property="og:description" content="因公司需求需使用protobuf，然后就有了这个踩坑记录

什么是protobuf？官方解释为：

Protocol buffers are a flexible, efficient, automated mechanism for serializing structured data – think XML, but smaller, faster, and simpler. You de">
<meta property="og:updated_time" content="2019-02-24T09:25:44.027Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="vue中使用protobuf踩坑记">
<meta name="twitter:description" content="因公司需求需使用protobuf，然后就有了这个踩坑记录

什么是protobuf？官方解释为：

Protocol buffers are a flexible, efficient, automated mechanism for serializing structured data – think XML, but smaller, faster, and simpler. You de">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/blog/',
    scheme: 'Muse',
    sidebar: {"position":"left","display":"post","offset":12,"offset_float":0,"b2t":false,"scrollpercent":false},
    fancybox: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://rsl140.github.io/blog/2018/06/27/protobuf/"/>





  <title> vue中使用protobuf踩坑记 | XiaoSi </title>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  














  
  
    
  

  <div class="container sidebar-position-left page-post-detail ">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/blog/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">XiaoSi</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/blog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/blog/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/blog/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/blog/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal " itemscope itemtype="http://schema.org/Article">
    <link itemprop="mainEntityOfPage" href="https://rsl140.github.io/blog/blog/2018/06/27/protobuf/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Summer">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/blog/uploads/1.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="XiaoSi">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">
            
            
              
                vue中使用protobuf踩坑记
              
            
          </h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2018-06-27T10:16:22+08:00">
                2018-06-27
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/FE/" itemprop="url" rel="index">
                    <span itemprop="name">FE</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/blog/2018/06/27/protobuf/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count disqus-comment-count" data-disqus-identifier="2018/06/27/protobuf/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          
            <span class="post-meta-divider">|</span>
            <span class="page-pv"><i class="fa fa-file-o">阅读次数</i>
            <span class="busuanzi-value" id="busuanzi_value_page_pv" ></span>次
            </span>
          

          

          

        </div>
      </header>
    


    <div class="post-body" itemprop="articleBody">

      
      

      
        <blockquote>
<p>因公司需求需使用protobuf，然后就有了这个踩坑记录</p>
</blockquote>
<h1 id="什么是protobuf？"><a href="#什么是protobuf？" class="headerlink" title="什么是protobuf？"></a>什么是protobuf？</h1><p>官方解释为：</p>
<blockquote>
<p>Protocol buffers are a flexible, efficient, automated mechanism for serializing structured data – think XML, but smaller, faster, and simpler. You define how you want your data to be structured once, then you can use special generated source code to easily write and read your structured data to and from a variety of data streams and using a variety of languages. You can even update your data structure without breaking deployed programs that are compiled against the “old” format.</p>
</blockquote>
<p>翻译是(机翻—我英语不好)</p>
<blockquote>
<p>协议缓冲区是用于序列化结构化数据的灵活，高效的自动化机制 - 思考XML，但更小，更快，更简单。您可以定义一次数据的结构，然后您可以使用特殊的源代码轻松地将结构化数据写入各种数据流并使用各种语言读取和读取数据。您甚至可以更新您的数据结构，而不会中断根据“旧”格式编译的已部署程序。</p>
</blockquote>
<p>特点：</p>
<ul>
<li>更简单</li>
<li>是3到10倍小</li>
<li>速度要快20到100倍</li>
<li>不太模糊</li>
<li>生成更易于以编程方式使用的数据访问类<a id="more"></a>
<h1 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h1><blockquote>
<p>在github上写了个demo<br><a href="https://github.com/rsl140/work_notes_demo/tree/master/proto_demo" target="_blank" rel="external">demo地址</a> 有需要的可以下载下来跑一下就理解了。PS:如果觉得有用 请给我个小星星 (笔芯~)</p>
</blockquote>
</li>
</ul>
<h1 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h1><p>其实最开始我尝试使用一个第三方JS  <a href="https://github.com/dcodeIO/protobuf.js" target="_blank" rel="external">protobuf.js</a><br><code>protobuf.load</code>的时候浏览器报了个错<a href="https://github.com/dcodeIO/protobuf.js/issues/1023" target="_blank" rel="external">illegal token ‘&lt;’ (/demo.proto, line 1)</a>查找了下官网issue,大意应该是proto文件多了个字符，但是我查看过proto文件并没有发现有多的’&lt;’，怎么办呢，最后放弃使用第三方。用官方提供的方法。</p>
<h2 id="下载protobuf编译器"><a href="#下载protobuf编译器" class="headerlink" title="下载protobuf编译器"></a>下载protobuf编译器</h2><p><a href="https://repo1.maven.org/maven2/com/google/protobuf/protoc/" target="_blank" rel="external">下载地址</a> (我下载的是3.40版)<br><a href="https://github.com/google/protobuf/releases" target="_blank" rel="external">github也提供了zip包，可自行下载</a> (目前最新版本是v3.6.0)<br>用来编译proto为JS文件方便调用</p>
<h2 id="配置环境变量"><a href="#配置环境变量" class="headerlink" title="配置环境变量"></a>配置环境变量</h2><p>由于公司用的是win10 只需要将下载的文件地址添加到path即可<br>Mac与window命令唯一的区别就是需要将protoc改成protoc.exe 前提是需要添加环境变量<br><a href="https://www.jianshu.com/p/e63082e9188d" target="_blank" rel="external">配置环境可参考这篇文章</a></p>
<h2 id="编写proto文件"><a href="#编写proto文件" class="headerlink" title="编写proto文件"></a>编写proto文件</h2><p>为了确保前后一致，下面是后台写给我的一个测试proto，我司后台是java<br><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line">syntax = <span class="string">"proto2"</span>;//protobuf版本</div><div class="line">option java_package = <span class="string">"com.test.protobuf"</span>;</div><div class="line">option java_outer_classname = <span class="string">"PersonMessage"</span>;</div><div class="line">message Person &#123;</div><div class="line">  required int32 id = 1;</div><div class="line">  optional string name = 2;</div><div class="line">  optional string email = 3;</div><div class="line">  repeated string list = 4;</div><div class="line">  extensions 100 to 1000;//允许扩展的ID</div><div class="line">&#125;</div><div class="line"></div><div class="line">message PersonTree &#123;</div><div class="line">  optional string id = 1;</div><div class="line">  optional string title = 2;</div><div class="line">  repeated PersonTree childs = 3;</div><div class="line">&#125;</div><div class="line"></div><div class="line">extend Person &#123;</div><div class="line">  optional int32 count = 101;</div><div class="line">  optional int32 likes_cnt= 102;</div><div class="line">&#125;</div><div class="line"></div><div class="line">message PersonEx &#123;</div><div class="line">  optional int32 id = 1;</div><div class="line">  extend Person &#123;</div><div class="line">    optional int32 px = 103;</div><div class="line">    optional int32 py= 104;</div><div class="line">  &#125;</div><div class="line">  optional Person p = 2;</div><div class="line">&#125;</div></pre></td></tr></table></figure></p>
<h2 id="使用vue-cli构建一个工程目录"><a href="#使用vue-cli构建一个工程目录" class="headerlink" title="使用vue-cli构建一个工程目录"></a>使用vue-cli构建一个工程目录</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div></pre></td><td class="code"><pre><div class="line">npm install -g vue-cli</div><div class="line">vue init webpack my-project</div><div class="line"><span class="built_in">cd</span> my-project</div><div class="line">npm install</div><div class="line">npm run dev</div></pre></td></tr></table></figure>
<p>安装插件：<code>npm install axios element-ui google-protobuf --save</code></p>
<h2 id="编译proto为JS"><a href="#编译proto为JS" class="headerlink" title="编译proto为JS"></a>编译proto为JS</h2><p>进入<code>awesome.proto</code>的存放路径 使用如下命令<br><code>protoc.exe --js_out=import_style=commonjs,binary:. awesome.proto</code></p>
<ul>
<li>会生成一个<code>awesome_pb.js</code>文件</li>
<li>点击查看<code>awesome_pb.js</code>其实可以看到里面是生成好的方法。只需要在页面中引入JS调用即可</li>
</ul>
<p>之后我们将这个文件引入页面，当然你也可以考虑全局引用</p>
<h2 id="测试"><a href="#测试" class="headerlink" title="测试"></a>测试</h2><h3 id="本地测试"><a href="#本地测试" class="headerlink" title="本地测试"></a>本地测试</h3><p>编写一个测试页面,创建一个测试按钮<br>我是在测试页面<code>import messages from &#39;./awesome_pb.js&#39;</code><br>方法为：<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div></pre></td><td class="code"><pre><div class="line">methods: &#123;</div><div class="line">    protobufferTest () &#123;</div><div class="line">      <span class="keyword">var</span> message = <span class="keyword">new</span> messages.Person() <span class="comment">// 调用Person对象  实例化</span></div><div class="line">      <span class="comment">// 赋值</span></div><div class="line">      message.setId(<span class="number">23</span>)</div><div class="line">      message.setName(<span class="string">'asd'</span>)</div><div class="line">      <span class="comment">// 序列化</span></div><div class="line">      <span class="keyword">var</span> bytes = message.serializeBinary()</div><div class="line"></div><div class="line">      <span class="built_in">console</span>.log(bytes) <span class="comment">// Uint8Array(7) [8, 23, 18, 3, 97, 115, 100]</span></div><div class="line"></div><div class="line">      <span class="comment">// 反序列化</span></div><div class="line">      <span class="keyword">var</span> message2 = messages.Person.deserializeBinary(bytes)</div><div class="line"></div><div class="line">      <span class="built_in">console</span>.log(message2) <span class="comment">// proto.PersonTree &#123;wrappers_: null, messageId_: undefined, arrayIndexOffset_: -1, array: Array(3), pivot_: 1.7976931348623157e+308, …&#125;</span></div><div class="line"></div><div class="line">    &#125;</div><div class="line">  &#125;</div></pre></td></tr></table></figure></p>
<p>到此，本地测试完成，没什么毛病了。</p>
<h3 id="前后端联调测试"><a href="#前后端联调测试" class="headerlink" title="前后端联调测试"></a>前后端联调测试</h3><p>前方有坑</p>
<p>前后传输是使用的FormData，然后悲剧的事情来了。后台解析不了。查看了下数据 <code>[8, 23, 18, 3, 97, 115, 100]</code>确实是传过去了。<br><del> 后来排查出原因是应该是解析成了字符串，然后数值变了。所以解析不出来。<br>后来使用fromCharCode()方法编辑成字符串形式传输给后台。在使用charCodeAt()取值。<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div></pre></td><td class="code"><pre><div class="line">此方法已弃用</div><div class="line">protobufferTest () &#123;</div><div class="line">      <span class="keyword">var</span> message = <span class="keyword">new</span> messages.Person() <span class="comment">// 调用Person对象  实例化</span></div><div class="line">      <span class="comment">// 赋值</span></div><div class="line">      message.setId(<span class="number">23</span>)</div><div class="line">      message.setName(<span class="string">'asd'</span>)</div><div class="line">      <span class="comment">// 序列化</span></div><div class="line">      <span class="keyword">var</span> bytes = message.serializeBinary()</div><div class="line"></div><div class="line">      <span class="built_in">console</span>.log(bytes) <span class="comment">// Uint8Array(7) [8, 23, 18, 3, 97, 115, 100]</span></div><div class="line"></div><div class="line">      <span class="keyword">var</span> tests = <span class="string">''</span></div><div class="line">      <span class="keyword">for</span> (<span class="keyword">let</span> index = <span class="number">0</span>; index &lt; bytes.length; index++) &#123;</div><div class="line">        tests += <span class="built_in">String</span>.fromCharCode(bytes[index])</div><div class="line">      &#125;</div><div class="line">      <span class="built_in">console</span>.log(tests) <span class="comment">// asd</span></div><div class="line"></div><div class="line">      <span class="comment">// 存入FormData</span></div><div class="line">      <span class="keyword">let</span> uploadDatas = <span class="keyword">new</span> FormData()</div><div class="line">      uploadDatas.append(<span class="string">'protobuf'</span>, tests)</div><div class="line"></div><div class="line">      <span class="comment">// 使用axios传输给后台</span></div><div class="line">      <span class="keyword">this</span>.axios.post(<span class="string">'/test'</span>, uploadDatas)</div><div class="line">        .then(<span class="function"><span class="keyword">function</span> (<span class="params">response</span>) </span>&#123;</div><div class="line">          <span class="comment">// 将传回的字符串转为数组</span></div><div class="line">          <span class="built_in">console</span>.log(response.data.split(<span class="string">''</span>)) <span class="comment">// ["↵", "", "3", "2", "", "", "a", "s", "d", "f"]</span></div><div class="line">          <span class="keyword">let</span> str = response.data.split(<span class="string">''</span>)</div><div class="line">          <span class="keyword">let</span> toChar = []</div><div class="line">          <span class="keyword">for</span> (<span class="keyword">let</span> index = <span class="number">0</span>; index &lt; str.length; index++) &#123;</div><div class="line">            toChar.push(str[index].charCodeAt())</div><div class="line">          &#125;</div><div class="line">          <span class="built_in">console</span>.log(toChar) <span class="comment">// [10, 2, 51, 50, 18, 4, 97, 115, 100, 102]</span></div><div class="line"></div><div class="line">          <span class="comment">// 后台传回来的是PersonTree里面的值所以调用PersonTree来反序列化</span></div><div class="line">          <span class="keyword">var</span> message2 = messages.PersonTree.deserializeBinary(toChar)</div><div class="line"></div><div class="line">          <span class="built_in">console</span>.log(message2) <span class="comment">// proto.PersonTree &#123;wrappers_: null, messageId_: undefined, arrayIndexOffset_: -1, array: Array(3), pivot_: 1.7976931348623157e+308, …&#125;</span></div><div class="line"></div><div class="line">          <span class="comment">// 获取PersonTree的id值</span></div><div class="line">          <span class="built_in">console</span>.log(message2.getId()) <span class="comment">// 32</span></div><div class="line">        &#125;)</div><div class="line">        .catch(<span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</div><div class="line">          <span class="built_in">console</span>.log(error)</div><div class="line">        &#125;)</div><div class="line"></div><div class="line">    &#125;</div></pre></td></tr></table></figure></del></p>
<p></p>
<p>以上方法可能存在安全隐患。<br>向后端传值<br>因为FormData支持两种方式传输string和blob所以将bytes存入blob中<br>前端获取数据<br>对axios的默认传输方式做个更改<br>axios.defaults.responseType = ‘arraybuffer’<br>将以上的JS代码更改为以下内容<br><figure class="highlight js"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div></pre></td><td class="code"><pre><div class="line">protobufferTest () &#123;</div><div class="line">      <span class="keyword">var</span> message = <span class="keyword">new</span> messages.Person()</div><div class="line">      message.setId(<span class="number">23</span>)</div><div class="line">      message.setName(<span class="string">'asd'</span>)</div><div class="line">      <span class="keyword">var</span> bytes = message.serializeBinary()</div><div class="line"></div><div class="line">      <span class="built_in">console</span>.log(bytes)</div><div class="line">      <span class="keyword">let</span> uploadDatas = <span class="keyword">new</span> FormData()</div><div class="line">      <span class="keyword">var</span> blob = <span class="keyword">new</span> Blob([bytes], &#123;<span class="attr">type</span>: <span class="string">'application/octet-stream'</span>&#125;)</div><div class="line"></div><div class="line">      uploadDatas.append(<span class="string">'protobuf'</span>, blob)</div><div class="line"></div><div class="line">      <span class="keyword">this</span>.axios.post(<span class="string">'/test'</span>, uploadDatas)</div><div class="line">        .then(<span class="function"><span class="keyword">function</span> (<span class="params">response</span>) </span>&#123;</div><div class="line">          <span class="built_in">console</span>.log(response)</div><div class="line"></div><div class="line">          <span class="keyword">var</span> message2 = messages.PersonTree.deserializeBinary(response.data)</div><div class="line">          <span class="built_in">console</span>.log(message2.getId())</div><div class="line">        &#125;)</div><div class="line">        .catch(<span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</div><div class="line">          <span class="built_in">console</span>.log(error)</div><div class="line">        &#125;)</div><div class="line">      <span class="comment">// console.log(bytes)</span></div><div class="line">    &#125;</div></pre></td></tr></table></figure></p>
<p>至此前后联调完成</p>
<h1 id="参考文档"><a href="#参考文档" class="headerlink" title="参考文档"></a>参考文档</h1><p><a href="https://www.jianshu.com/p/e63082e9188d" target="_blank" rel="external">前端后台以及游戏中使用google-protobuf详解</a><br><a href="https://blog.csdn.net/arvin_kai/article/details/77532595" target="_blank" rel="external">javascript前端如何使用google-protobuf</a></p>

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>

    <div>
      
        

      
    </div>

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/blog/tags/vue/" rel="tag"># vue</a>
          
        </div>
      

      
        
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/blog/2018/06/19/fbs/" rel="next" title="分布式部署安装方案">
                <i class="fa fa-chevron-left"></i> 分布式部署安装方案
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/blog/2018/12/21/scrollTopFaileSetValue/" rel="prev" title="vue scrollTop 无法赋值">
                vue scrollTop 无法赋值 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
  <div class="comments" id="comments">
    
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div>
    
  </div>


        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/blog/uploads/1.jpg"
               alt="Summer" />
          <p class="site-author-name" itemprop="name">Summer</p>
           
              <p class="site-description motion-element" itemprop="description">小思</p>
          
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/blog/archives/">
                <span class="site-state-item-count">27</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/blog/categories/index.html">
                <span class="site-state-item-count">8</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/blog/tags/index.html">
                <span class="site-state-item-count">17</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a href="http://github.com/rsl140" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                  GitHub
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a href="https://segmentfault.com/u/xiaosi_58ec6bdf9eaab" target="_blank" title="Segmentfault">
                  
                    <i class="fa fa-fw fa-globe"></i>
                  
                  Segmentfault
                </a>
              </span>
            
          
        </div>

        
        

        
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#什么是protobuf？"><span class="nav-number">1.</span> <span class="nav-text">什么是protobuf？</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#代码"><span class="nav-number">2.</span> <span class="nav-text">代码</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#使用"><span class="nav-number">3.</span> <span class="nav-text">使用</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#下载protobuf编译器"><span class="nav-number">3.1.</span> <span class="nav-text">下载protobuf编译器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#配置环境变量"><span class="nav-number">3.2.</span> <span class="nav-text">配置环境变量</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#编写proto文件"><span class="nav-number">3.3.</span> <span class="nav-text">编写proto文件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#使用vue-cli构建一个工程目录"><span class="nav-number">3.4.</span> <span class="nav-text">使用vue-cli构建一个工程目录</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#编译proto为JS"><span class="nav-number">3.5.</span> <span class="nav-text">编译proto为JS</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#测试"><span class="nav-number">3.6.</span> <span class="nav-text">测试</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#本地测试"><span class="nav-number">3.6.1.</span> <span class="nav-text">本地测试</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#前后端联调测试"><span class="nav-number">3.6.2.</span> <span class="nav-text">前后端联调测试</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#参考文档"><span class="nav-number">4.</span> <span class="nav-text">参考文档</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2019</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Summer</span>
</div>

        
<div class="busuanzi-count">
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">
      <i class="fa fa-user">本站访客数</i>
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      人次
    </span>
  

  
    <span class="site-pv">
      <i class="fa fa-eye">本站总访问量</i>
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      次
    </span>
  
</div>


        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  



  
  <script type="text/javascript" src="/blog/lib/jquery/index.js?v=2.1.3"></script>

  
  <script type="text/javascript" src="/blog/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>

  
  <script type="text/javascript" src="/blog/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>

  
  <script type="text/javascript" src="/blog/lib/velocity/velocity.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/blog/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

  
  <script type="text/javascript" src="/blog/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

  
  <script type="text/javascript" src="/blog/lib/canvas-nest/canvas-nest.min.js"></script>


  


  <script type="text/javascript" src="/blog/js/src/utils.js?v=5.1.0"></script>

  <script type="text/javascript" src="/blog/js/src/motion.js?v=5.1.0"></script>



  
  

  
  <script type="text/javascript" src="/blog/js/src/scrollspy.js?v=5.1.0"></script>
<script type="text/javascript" src="/blog/js/src/post-details.js?v=5.1.0"></script>



  


  <script type="text/javascript" src="/blog/js/src/bootstrap.js?v=5.1.0"></script>



  



  

    <script type="text/javascript">
      var disqus_shortname = 'xiaosi';
      var disqus_identifier = '2018/06/27/protobuf/';

      var disqus_title = "vue中使用protobuf踩坑记";


      function run_disqus_script(disqus_script) {
        var dsq = document.createElement('script');
        dsq.type = 'text/javascript';
        dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/' + disqus_script;
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
      }

      run_disqus_script('count.js');

      
        var disqus_config = function () {
            this.page.url = disqus_url;
            this.page.identifier = disqus_identifier;
            this.page.title = disqus_title;
        };
        run_disqus_script('embed.js');
      

    </script>
  













  





  

  

  

  

</body>
</html>
